<script setup>
	import { ref } from 'vue'
	import { useRoleStore } from '@/stores/role'
	import { updateMerchantService, getMyStoreService } from '@/api/merchant'
	import { ElNotification, ElMessageBox, ElMessage } from 'element-plus'

	const myStore = ref({})
	const getMyStore = async () => {
		let result = await getMyStoreService()
		myStore.value = result.data
	}
	getMyStore()
	const newStore = ref({ ...myStore.value })
	const submit = () => {
		ElMessageBox.confirm(`确认修改店铺名?`)
			.then(async () => {
				await updateMerchantService(newStore.value)
				ElNotification({
					title: '修改成功',
					message: `成功修改店铺名：${newStore.value.storeName}`,
					type: 'success',
				})
				clear()
				getMyStore()
			})
			.catch(() => {
				ElMessage.info('取消')
				clear()
			})
	}
	const clear = () => {
		newStore.value = {}
	}
</script>

<template>
	<el-form
		label-position="right"
		label-width="auto"
		:model="myStore"
		style="max-width: 600px">
		<el-form-item label="原店铺名">
			<el-input v-model="myStore.storeName" disabled />
		</el-form-item>
		<el-form-item label="原地址">
			<el-input v-model="myStore.storeAddress" disabled />
		</el-form-item>
		<el-form-item label="原类型">
			<el-input v-model="myStore.storeCategory" disabled />
		</el-form-item>
		<el-form-item label="新店铺名">
			<el-input v-model="newStore.storeName" />
		</el-form-item>
		<el-form-item label="新地址">
			<el-input v-model="newStore.storeAddress" />
		</el-form-item>
		<el-form-item label="新类型">
			<el-input v-model="newStore.storeCategory" />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submit">提交修改</el-button>
		</el-form-item>
	</el-form>
</template>

<style scoped></style>
